<template>
  <Panel>
    <el-divider>主题</el-divider>
    <el-switch
      v-model="settings.theme.darkMode"
      inline-prompt
      class="pure-datatheme"
      :active-icon="dayIcon"
      :inactive-icon="darkIcon"
      @change="dataThemeChange"
    />

    <el-divider>导航栏模式</el-divider>
    <ul class="pure-theme">
      <el-tooltip
        :effect="tooltipEffect"
        class="item"
        content="左侧模式"
        placement="bottom"
        popper-class="pure-tooltip"
      >
        <li
          :class="app.isVertical ? 'is-select' : ''"
          ref="verticalRef"
          @click="app.setLayout('vertical')"
        >
          <div />
          <div />
        </li>
      </el-tooltip>

      <el-tooltip
        v-if="!app.isMobile"
        :effect="tooltipEffect"
        class="item"
        content="顶部模式"
        placement="bottom"
        popper-class="pure-tooltip"
      >
        <li
          :class="app.isHorizontal ? 'is-select' : ''"
          ref="horizontalRef"
          @click="app.setLayout('horizontal')"
        >
          <div />
          <div />
        </li>
      </el-tooltip>

      <el-tooltip
        v-if="!app.isMobile"
        :effect="tooltipEffect"
        class="item"
        content="混合模式"
        placement="bottom"
        popper-class="pure-tooltip"
      >
        <li
          :class="app.isMix ? 'is-select' : ''"
          ref="mixRef"
          @click="app.setLayout('mix')"
        >
          <div />
          <div />
        </li>
      </el-tooltip>
    </ul>

    <el-divider>主题色</el-divider>
    <ul class="theme-color">
      <li
        v-for="(item, index) in themeColors"
        :key="index"
        v-show="showThemeColors(item.themeColor)"
        :style="getThemeColorStyle(item.color)"
        @click="app.setThemeLayout(item.themeColor)"
      >
        <el-icon
          style="margin: 0.1em 0.1em 0 0"
          :size="17"
          :color="getThemeColor(item.themeColor)"
        >
          <IconifyIconOffline :icon="Check" />
        </el-icon>
      </li>
    </ul>

    <el-divider>界面显示</el-divider>
    <ul class="setting">
      <li>
        <span class="dark:text-white">灰色模式</span>
        <el-switch
          v-model="settings.pages.grey"
          inline-prompt
          inactive-color="#a6a6a6"
          active-text="开"
          inactive-text="关"
          @change="greyChange"
        />
      </li>
      <li>
        <span class="dark:text-white">色弱模式</span>
        <el-switch
          v-model="settings.pages.weak"
          inline-prompt
          inactive-color="#a6a6a6"
          active-text="开"
          inactive-text="关"
          @change="weekChange"
        />
      </li>
      <li>
        <span class="dark:text-white">隐藏标签页</span>
        <el-switch
          v-model="settings.pages.hideTabs"
          inline-prompt
          inactive-color="#a6a6a6"
          active-text="开"
          inactive-text="关"
        />
      </li>
      <li>
        <span class="dark:text-white">侧边栏Logo</span>
        <el-switch
          v-model="settings.pages.showLogo"
          inline-prompt
          :active-value="true"
          :inactive-value="false"
          inactive-color="#a6a6a6"
          active-text="开"
          inactive-text="关"
        />
      </li>

      <li>
        <span class="dark:text-white">标签风格</span>
        <el-radio-group v-model="settings.pages.showModel" size="small">
          <el-radio label="card">卡片</el-radio>
          <el-radio label="smart">灵动</el-radio>
        </el-radio-group>
      </li>
    </ul>

    <el-divider />
    <el-button
      type="danger"
      style="width: 90%; margin: 24px 15px"
      @click="store()"
    >
      <IconifyIconOffline
        :icon="Logout"
        width="15"
        height="15"
        style="margin-right: 4px"
      />
      持久化存储
    </el-button>
  </Panel>
</template>
<script setup lang="ts">
import {
  ref,
  reactive,
  computed,
  nextTick,
  onBeforeMount,
  onMounted
} from "vue";
import dayIcon from "@/assets/svg/day.svg?component";
import darkIcon from "@/assets/svg/dark.svg?component";
import Check from "@iconify-icons/ep/check";
import Logout from "@iconify-icons/ri/logout-circle-r-line";
import { useAppHooks } from "../../../../core/pinia/store/app.store";
import { IAppState, ISetting } from "@/core/pinia/interface";
import { CacheService } from "@/core/cache/cache.service";
import { GlobalStoreEnum } from "@/core/pinia/enum";
import { getThemeColors } from "@/core/pinia/util/store.util";
import { Helper } from "@/core/helper/helper.service";
import { RxEvent } from "@/core/event/event";
import Panel from "../panel/index.vue";
const app = useAppHooks();
const settings = reactive<IAppState>(app.$state);
/** 提示tip 主题 */
const tooltipEffect = "light";
const themeColors = getThemeColors();
const mixRef = ref();
const verticalRef = ref();
const horizontalRef = ref();

/** 日间、夜间主题切换 */
const dataThemeChange = () => {
  /* 如果当前是light夜间主题，默认切换到default主题 */
  if (settings.theme.name === "light" && settings.theme.darkMode) {
    app.setThemeLayout("default");
  } else {
    app.setThemeLayout(settings.theme.name);
  }
};

const getThemeColorStyle = computed(() => {
  return (color: string) => {
    return { background: color };
  };
});

/** 当网页为暗黑模式时不显示亮白色切换选项 */
const showThemeColors = computed(() => {
  return (themeColor: string) => {
    return themeColor === "light" && settings.theme.darkMode ? false : true;
  };
});

const toggleClass = (flag: boolean, clsName: string, target?: HTMLElement) => {
  const targetEl = target || document.body;
  let { className } = targetEl;
  className = className.replace(clsName, "").trim();
  targetEl.className = flag ? `${className} ${clsName} ` : className;
};

/** 灰色模式设置 */
const greyChange = (): void => {
  toggleClass(settings.pages.grey, "html-grey", document.querySelector("html"));
};

/** 色弱模式设置 */
const weekChange = (): void => {
  toggleClass(
    settings.pages.weak,
    "html-weakness",
    document.querySelector("html")
  );
};

/** 主题色 激活选择项 */
const getThemeColor = computed(() => {
  const name = settings.theme.name;
  return (current: string) => {
    if (current === name && name !== "light") {
      return "#fff";
    } else if (current === name && name === "light") {
      return "#1d2b45";
    } else {
      return "transparent";
    }
  };
});

onMounted(() => {
  /* body添加layout属性，作用于src/style/sidebar.scss */
  // toggleTheme({
  //   scopeName: `layout-theme-${settings.theme.name}`
  // });
});
onBeforeMount(() => {
  /* 初始化项目配置 */
  nextTick(() => {
    settings.pages.grey &&
      document.querySelector("html")?.setAttribute("class", "html-grey");
    settings.pages.weak &&
      document.querySelector("html")?.setAttribute("class", "html-weakness");
  });
});

const store = () => {
  const setting = {
    layout: app.getLayout,
    ...app.getPages,
    ...app.getTheme
  } as ISetting;
  CacheService.of().set(GlobalStoreEnum.APP, setting);
  Helper.showMessage("主题设置成功", "success");
  RxEvent.emitShowSetting(false);
};
</script>
<style lang="scss" scoped>
:deep(.el-divider__text) {
  font-size: 16px;
  font-weight: 700;
}

.is-select {
  border: 2px solid var(--el-color-primary);
}

.setting {
  width: 100%;

  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 25px;
  }
}

.pure-datatheme {
  display: block;
  width: 100%;
  height: 50px;
  padding-top: 25px;
  text-align: center;
}

.pure-theme {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  height: 50px;
  margin-top: 25px;

  li {
    position: relative;
    width: 18%;
    height: 45px;
    overflow: hidden;
    cursor: pointer;
    background: #f0f2f5;
    border-radius: 4px;
    box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);

    &:nth-child(1) {
      div {
        &:nth-child(1) {
          width: 30%;
          height: 100%;
          background: #1b2a47;
        }

        &:nth-child(2) {
          position: absolute;
          top: 0;
          right: 0;
          width: 70%;
          height: 30%;
          background: #fff;
          box-shadow: 0 0 1px #888;
        }
      }
    }

    &:nth-child(2) {
      div {
        &:nth-child(1) {
          width: 100%;
          height: 30%;
          background: #1b2a47;
          box-shadow: 0 0 1px #888;
        }
      }
    }

    &:nth-child(3) {
      div {
        &:nth-child(1) {
          width: 100%;
          height: 30%;
          background: #1b2a47;
          box-shadow: 0 0 1px #888;
        }

        &:nth-child(2) {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 30%;
          height: 70%;
          background: #fff;
          box-shadow: 0 0 1px #888;
        }
      }
    }
  }
}

.theme-color {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 40px;
  margin-top: 20px;

  li {
    float: left;
    width: 20px;
    height: 20px;
    margin-top: 8px;
    margin-right: 8px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    border-radius: 2px;

    &:nth-child(2) {
      border: 1px solid #ddd;
    }
  }
}
</style>
